<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-svg-demo</title>
    <script src="./js/d3.min.js"></script>
</head>

<body>
    <div id="svgcontainer-line">
        <svg width="300" height="300">
            <!--
                stroke - 线条的颜色。
                stroke-width - 线的粗细。
            -->
            <line x1="100" y1="100" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
        </svg>
    </div>
    <div id="svgcontainer-rect">
        <svg width="300" height="300">
            <rect x="20" y="20" width="300" height="300" fill="green"></rect>
        </svg>
    </div>
    <div id="svgcontainer-circle">
        <svg width="300" height="300">
            <!--
                cx 圆心坐标 x
                cy 圆心坐标 y
                r 半径
            -->
            <circle cx="100" cy="100" r="100" fill="blue" />
        </svg>
    </div>
    <div id="svgcontainer-ellipse">
        <!--
            cx 椭圆圆心坐标 x
            cy 椭圆圆心坐标 y
            rx 椭圆x半径
            ry 椭圆y半径
        -->
        <svg width="400" height="300">
            <ellipse cx="200" cy="100" rx="150" ry="100" fill="orange" />
        </svg>
    </div>
</body>
<script>
    // 添加一个相同的svg元素
    var width = 300;
    var height = 300;
    var svgLine = d3.select("#svgcontainer-line")
        .append("svg").attr("width", width).attr("height", height);
    svgLine.append("line")
        .attr("x1", 100)
        .attr("y1", 100)
        .attr("x2", 200)
        .attr("y2", 200)
        .style("stroke", "rgb(255,0,0)")
        .style("stroke-width", 2);

    var svgRect = d3.select("#svgcontainer-rect")
        .append("svg").attr("width", width).attr("height", height);
    svgRect.append("rect")
        .attr("x", 20)
        .attr("y", 20)
        .attr("width", width)
        .attr("height", height)
        .style("fill", "green");
</script>

</html>